<template>
  <view
    class="scroll"
	id="scrollBox"
    :style="style"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd">
    <view class="msg-box">
      <view v-if="moveState < 2">
		  <view class="msg-type">
			  <u-icon name="reload" color="$bg-color" size="28"></u-icon>
			  {{ moveState === 0 ? '下拉即可刷新...' : '释放即可刷新...' }}
		  </view>
	  </view>
      <view v-else >
	    <blockloading/>
	  </view>
    </view>
    <view>
      <slot/>
    </view>
	<view :style="bottomStyle" class="bottomBox">
		<view v-if="bottomHeight>120">
			<spotloading/>
		</view>
		<view v-else>
			测试
		</view>
	</view>
  </view>
</template>
 
<script>
import blockloading from './blockloading.vue';
import spotloading from './spotloading.vue'
export default({
  name: 'pull-refresh',
  onPageScroll(e){
  	console.log('onPageScroll',e)
  },
  components:{
	  blockloading,
	  spotloading
  },
  data () {
    return {
	  type:'',  //触发方式 up为上拉加载 down为下拉刷新
      startY: '',    //保存touch时的Y坐标
      moveDistance: 0,    //保存向下滑动的距离
      moveState: 0,        //开始滑动到结束后状态的变化 0:下拉即可刷新 1:释放即可刷新 2:加载中
      duration: 0,        //动画持续时间，0就是没有动画
	  bottomHeight:0   //底部边距滑动高度
    }
  },
  computed: {
    style () {
      return {
        transition: `${this.duration}ms`,
        transform: `translate3d(0,${this.moveDistance}px, 0)`
      }
    },
	bottomStyle(){
		return {
			height:`${this.bottomHeight}upx`
		}
	}
  },
  methods: {
	
    touchStart (e) {
      this.duration = 0 // 关闭动画
      this.moveDistance = 0 // 滑动距离归0
      this.startY = e.touches[0].clientY  // 获得开始Y坐标
	  // console.log(e)
    },
    touchMove (e) {    //这里是整个下拉刷新的核心
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
	  let isBottom = this.isBottom()
        //首先判断有没有滚动条，如果有，下拉刷新就不能启用。
      if (scrollTop > 0 || isBottom) return 
      let move = e.touches[0].clientY - this.startY
        //判断手指滑动的距离，只有为正数才代表用户下拉了。
		// console.log('scrollTop',scrollTop)
		// console.log('move',move)
	  if(scrollTop === 0){
		  
	    if (move > 0) {
		  //阻止默认事件，在微信浏览器中尤为有用。
	  	  e.preventDefault()
		  //增加滑动阻力的感觉
		  this.moveDistance = Math.pow(move, 0.7)
		  if (this.moveDistance > 50) {
		  //如果滑动距离大于50 就告诉你，释放即可刷新
		  if (this.moveState === 1) return
		  this.moveState = 1
		  } else {
		  //否则 恢复原样
		    if (this.moveState === 0) return
		    this.moveState = 0
		  }
	    }
	  } else {
		  if(isBottom){
			// 添加阻尼感
			this.bottomHeight = move*(-0.4)
		  }		  
	  }
      
    },
    touchEnd (e) {
      // 只要手指拿开，加上结束时的动画，这里为300ms
      this.duration = 300
      if (this.moveDistance > 50) {
        //这里逻辑跟touchMove一样，但是需要真的加载数据了，那moveState变为2 所以加载动画在这出现
        this.moveState = 2
        //因为还没加载完，让加载动画显示着，所以这里移动距离为50
        this.moveDistance = 50
        this.$emit('refresh', () => {
            //这里就是成功后的回调了，如果该函数被调用，那就以为着加载数据完成，所以状态要回到0，当然需要在父组件调用。
          this.moveState = 0
        })
      } else {
        //否则 恢复原样
        this.moveDistance = 0
      }
    },
	// 判断是否到底部
	isBottom(){
		const scrollTop = document.documentElement.scrollTop || document.body.scrollTop //获取滚动条的高度
		const winHeight = document.documentElement.clientHeight || document.body.clientHeight //获取一屏的高度
		let bodyScrollHeight = 0
		let documentScrollHeight = 0
		if (document.body) {
		  bodyScrollHeight = document.body.scrollHeight
		}
		if (document.documentElement) {
		  documentScrollHeight = document.documentElement.scrollHeight
		}
		  // 当页面内容超出浏览器可视窗口大小时，Html的高度包含body高度+margin+padding+border所以html高度可能会大于body高度
		const scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight  //后去文档总高度
		// console.log(scrollTop >= parseInt(scrollHeight) - winHeight)
		return scrollTop - parseInt(scrollHeight) - winHeight < 5 // js计算时可能产生0.01的问题，所以这里给的是5
	}
  },
  watch: {
    //这里是给用户操作返回的核心
    moveState (state) {
      //监听moveState的状态，
      //0意味着开始也意味着结束，这里是结束，并且只有动画生效我们才能 moveDistance 设为0，
      //为什么动画生效才行，因为动画生效意味着手指离开了屏幕，如果不懂去看touchEnd方法，这时
      //让距离变为0才会有动画效果。
      if (state === 0 && this.duration === 300) {
        this.moveDistance = 0
      }
    }
  }
})
</script>
<style scoped lang="scss" >
	.scroll{
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-top: -90upx;
		.msg-box{
			width: 100%;
			height: 80upx;
			// background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.msg-type{
				color:$bg-color;
			}
		}
		.bottomBox{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// background-color: #000;
		}
	}
</style>